<template>
  <div class="page-baseinfo">
    <el-form :inline="true" :model="searchForm" ref="roleForm">
      <div class="pc-page-header">
        <el-form-item  prop="id">
          <el-input v-model="searchForm.id" clearable  class="pc-input3-col5" placeholder="输入用户ID"></el-input>
        </el-form-item>
        <el-form-item  prop="registryPhone">
          <el-input v-model="searchForm.registryPhone" clearable  class="pc-input3-col5" placeholder="输入注册手机号"></el-input>
        </el-form-item>
        <el-form-item  prop="companyName">
          <el-input v-model="searchForm.companyName" clearable  class="pc-input3-col5" placeholder="输入公司全称"></el-input>
        </el-form-item>
        <el-form-item  prop="companyType">
          <el-select v-model="searchForm.companyType"  placeholder="选择身份" class="pc-input3-col5" >
            <el-option v-for="item in companyTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="multiply-selet" v-if="isshowMore" prop="auditStatus">
          <el-select   multiple
                        collapse-tags v-model="searchForm.auditStatus" placeholder="选择审核状态" class="pc-input3-col4">
            <el-option v-for="item in auditStatusOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isshowMore" prop="waitAuditTime">
          <el-date-picker class="pc-input-col3"
                          v-model="searchForm.waitAuditTime"
                          type="datetimerange"
                          :editable="false"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm"
                          format="yyyy-MM-dd HH:mm"
                          @change="getDate"
                          align="right" >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('roleForm')">刷新</el-button>
          <el-button @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid border
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryRoleList"  :queryData="searchForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
    <pc-dialog :is-show="isShowAuditDialog"  title ='审核详情' @on-close="closeAudit">
      <div >
        <audit @sonAudit="sonAudit" :detailData="detailData"></audit>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowAuditDetailDialog"  title ='查看用户' @on-close="isShowAuditDetailDialog = false">
      <div >
        <user :detailData="detailData"></user>
      </div>
    </pc-dialog>
  </div>
</template>
<script>
import PcDialog from 'components/dialog';
import Audit from '../auditDetail/index';
import User from '../viewUser/index';
import PcPagination from 'components/form/pagination';

let that;
var Btn = {
  template:
    `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button  type="danger"  plain v-if="row.auditStatus == '1' && hasPermission('wms:baseinfouseraudit:audit')"  @click="toAudit(row)">审核</el-button>
          <el-button  type="primary"  plain   v-else="row.auditStatus !== '1' && hasPermission('wms:baseinfouseraudit:detail')"  @click="toDetail(row)">查看</el-button>
      </div>`,
  props: ['row'],
  methods: {
    toAudit(row) {
      this.$emit('to-audit', row);
    },
    toDetail(row) {
      this.$emit('to-detail', row);
    }
  }
};
export default {
  components: {
    PcDialog, PcPagination, Audit, User
  },
  created () {
    that = this;
  },
  computed: {
    pageSearchForm: function() {
      let pageSearchForm = {};
      pageSearchForm.id = this.searchForm.id;
      pageSearchForm.registryPhone = this.searchForm.registryPhone;
      pageSearchForm.companyName = this.searchForm.companyName;
      pageSearchForm.companyType = this.searchForm.companyType;
      pageSearchForm.auditStatus = this.searchForm.auditStatus.length !== 0 ? this.searchForm.auditStatus : ['1', '2', '3'];
      if (this.waitAuditTime !== null) {
        pageSearchForm.startWaitAuditTime = this.waitAuditTime[0] !== undefined ? this.waitAuditTime[0].toString() : '';
        pageSearchForm.endWaitAuditTime = this.waitAuditTime[1] !== undefined ? this.waitAuditTime[1].toString() : '';
      }
      return pageSearchForm;
    }
  },
  data () {
    return {
      showMoreText: '更多',
      isshowMore: false,
      isShowAuditDialog: false,
      isShowAuditDetailDialog: false,
      searchForm: {
        id: null,
        registryPhone: null,
        companyName: null,
        companyType: null,
        auditStatus: [],
        waitAuditTime: null,
        startWaitAuditTime: null,
        endWaitAuditTime: null
      },
      companyTypeOption: [
        {
          value: '1',
          label: '货主'
        }, {
          value: '2',
          label: '资金方'
        }, {
          value: '3',
          label: '仓库'
        }
      ],
      auditStatusOption: [
        {
          value: '1',
          label: '待审核'
        }, {
          value: '2',
          label: '审核通过'
        }, {
          value: '3',
          label: '审核不通过'
        }
      ],
      tableData: [],
      pageUrl: {
        queryRoleList: '/maliwms/company/getAuditCompanyList' // /company/getManageCompanyList
      },
      currentPage: 5,
      detailData: {},
      columns: [
        {
          label: '用户ID',
          prop: 'id'
        },
        {
          label: '注册手机号',
          prop: 'registryPhone'
        },
        {
          label: '公司全称',
          prop: 'companyName'
        },
        {
          label: '身份',
          prop: 'companyTypeDesc'
        },
        {
          label: '审核状态',
          prop: 'auditStatusDesc'
        },
        {
          label: '提交审核时间',
          prop: 'waitAuditTime'
        },
        {
          label: '操作',
          minWidth: 100,
          fixed: 'right',
          component: Btn,
          listeners: {
            'to-audit' (row) {
              that.toAudit(row);
            },
            'to-detail' (row) {
              that.toDetail(row);
            }
          },
          propsHandler: function ({ row, col, column }) {
            return {row, col, column};
          }
        }
      ],
      columnsSchema: {
        '身份': {
          propsHandler ({ col, row }) {
          }
        }
      },
      columnsProps: {
        height: 40,
        minWidth: 100,
        showOverflowTooltip: true
      }
    };
  },
  methods: {
    showMore () {
      this.isshowMore = !this.isshowMore;
      if (this.isshowMore) {
        this.showMoreText = '收起';
      } else {
        this.showMoreText = '更多';
      }
    },
    // 表头样式
    queryDataFn() {
      this.$refs.pcPagination.queryListWithPageFn(true);
    },
    getDate () {
      if (this.searchForm.waitAuditTime === null) {
        this.searchForm.startDate = '';
        this.searchForm.endDate = '';
      } else {
        this.searchForm.startWaitAuditTime = this.searchForm.waitAuditTime[0];
        this.searchForm.endWaitAuditTime = this.searchForm.waitAuditTime[1];
      }
    },
    queryCallBackFn (res) {
      this.tableData = res.result.list;
    },
    refresh(formName) {
      this.$refs[formName].resetFields();
      this.searchForm.startWaitAuditTime = '';
      this.searchForm.endWaitAuditTime = '';
      this.queryDataFn();
    },
    toAudit(item) {
      let id = item.id;
      this.getAuditData(id);
      this.isShowAuditDialog = true;
    },
    getAuditData(companyId) {
      let that = this;
      that.ajax({
        type: 'GET',
        url: '/maliwms/company/getCompanyById?companyId=' + companyId,
        loading: true,
        success: (res) => {
          setTimeout(() => {
            that.$pcNProgress.done();
          }, 300);
          if (res && res.code === 200) {
            // 请求成功之后执行
            that.detailData = res.result;
          }
        }
      });
    },
    closeAudit () {
      this.isShowAuditDialog = false;
    },
    toDetail(item) {
      let id = item.id;
      this.getAuditData(id);
      this.isShowAuditDetailDialog = true;
    },

    sonAudit() {
      this.isShowAuditDialog = false;
      this.refresh('roleForm');
    },
    columnsHandler() {}
  }
};
</script>
<style scoped>
.el-table th.is-leaf{
  background:#f5f5f5!important;
}
.el-table th.is-leaf .cell{
  /*font-size:16px!important;*/
}
/*.multiply-selet .pc-input3-col3{*/
  /*width:331px!important;*/
/*}*/
/*.multiply-selet .pc-input3-col5{*/
  /*width:331px!important;*/
/*}*/
</style>
